
import React from 'react';
import { Card } from 'antd';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/funnel';

import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import styles from './MyEchart.less';

class EchartsTest extends React.Component {
  constructor(...args) {
    super(...args);
  }
  componentWillReceiveProps({ msg }) {
    const msgs = msg || [];
    const key_arr = [];
    for (let i = 0; i < msgs.length; i++) {
      key_arr.push(msgs[i].name);
    }
    const myChart = echarts.init(document.getElementById('main'));
    const projectArray = [];
    const option = {
      backgroundColor: '#394056',
      title: {
        text: '请求数',
        textStyle: {
          fontWeight: 'normal',
          fontSize: 16,
          color: '#F1F1F3',
        },
        left: '6%',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#57617B',
          },
        },
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['移动', '电信', '联通'],
        right: '4%',
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#57617B',
          },
        },
        data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'],
      }],
      yAxis: [{
        type: 'value',
        name: '单位（%）',
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#57617B',
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          lineStyle: {
            color: '#57617B',
          },
        },
      }],
      series: [{
        name: '移动',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(137, 189, 27, 0.3)',
            }, {
              offset: 0.8,
              color: 'rgba(137, 189, 27, 0)',
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(137,189,27)',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12,

          },
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
      }, {
        name: '电信',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0, 136, 212, 0.3)',
            }, {
              offset: 0.8,
              color: 'rgba(0, 136, 212, 0)',
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: 'rgb(0,136,212)',
            borderColor: 'rgba(0,136,212,0.2)',
            borderWidth: 12,

          },
        },
        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
      }, {
        name: '联通',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(219, 50, 51, 0.3)',
            }, {
              offset: 0.8,
              color: 'rgba(219, 50, 51, 0)',
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {

            color: 'rgb(219,50,51)',
            borderColor: 'rgba(219,50,51,0.2)',
            borderWidth: 12,
          },
        },
        data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
      }],
    };
    myChart.setOption(option);
    window.onresize = myChart.resize;
  }

  render() {
    return (
      <div >
        <div id="main" className={styles.cardBack} />
      </div>
    );
  }
}
